<style scoped>
</style>

<template>

  <div>

    <Modal v-model="IsModalShow" title="设置按钮" @on-cancel="cancel" width="1000">
      <Row>
        <Col :span="formTitle===''?24:15">
        <Row>
          <Button size="small" icon="plus" @click="addAction">添加</Button>
          <Button size="small" icon="edit" @click="editAction">修改</Button>
        </Row>
        <Row>
          <Table stripe size="small" :columns="tableColums" :data="tableData"></Table>
        </Row>
        </Col>
        <Col span="9" v-if="formTitle">
        <h3 style="margin:10px 50px;">{{formTitle}}</h3>
        <Form ref="modalForm" :model="modalForm" :label-width="80" value=true style="padding: 3px 60px">
          <Form-item label="按钮名称" prop="actionName" :rules="{required: true, message: '必填', trigger:'blur',type:'string'}">
            <Input size="small" v-model="modalForm.actionName"></Input>
          </Form-item>
          <Form-item label="按钮代码" prop="actionCode" :rules="{required: true, message: '必填', trigger:'blur',type:'string'}">
            <Input size="small" v-model="modalForm.actionCode"></Input>
          </Form-item>
        </Form>
        </Col>
      </Row>

      <div slot="footer">
        <Button type="ghost" @click="cancel">关闭</Button>
        <Button type="primary" :loading="modalForm_loading" @click="saveForm('modalForm')">保存</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { actionList, saveAction } from "@/api/getData";
import { clearObj } from "@/libs/util";
export default {
  props: {
    modalShow: {
      type: Boolean,
      default: false
    },
    Rbac_FunctionId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      IsModalShow: false,
      tableColums: [
        {
          align: "center",
          title: "按钮名称",
          key: "actionName"
        },
        {
          align: "center",
          title: "按钮代码",
          key: "actionCode"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editAction(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delAction(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      tableData: [
        {
          actionName: "客户属性",
          actionCode: "",
          rbacFunctionId: 1
        }
      ],
      formTitle: "",
      modalForm: {
        id: "",
        actionName: "",
        actionCode: "",
        rbacFunctionId: ""
      },
      modalForm_loading: false
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      if (parseInt(this.Rbac_FunctionId) > 0&&curVal) {
        this.getActionnList();
      }
    }
  },
  mounted() {},
  methods: {
    async getActionnList() {
      let res = await actionList({
        id: this.Rbac_FunctionId
      });
      if (res.code == 0) {
        this.tableData = res.data;
        console.log(this.tableData)
      } else {
        this.$Message.error(res.msg);
      }
    },
    cancel() {
      this.formTitle = "";
      this.$emit("listenActionTable");
    },
    addAction() {
      this.formTitle = "添加按钮";
      clearObj(this.modalForm);
      this.modalForm.rbacFunctionId = this.Rbac_FunctionId;
    },
    editAction(index) {
      this.formTitle = "修改按钮";
      this.modalForm = JSON.parse(JSON.stringify(this.tableData[index]));
    },
    delAction() {},
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.modalForm_loading = true;
          this.modalForm.actions = [];
          const params = this.modalForm;
          try {
            let result = await saveAction(params);

            if (result.code == 0) {
              this.getActionnList();
            }
          } catch (err) {
            console.log(err);
            this.$Message.error("服务器异常，稍后再试");
          }
          this.modalForm_loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
